<template>
  <div class="shipping">
    <div class="container">
      <div class="center" v-for="(item,index) in shipingList" :key="index">
        <div class="logo">
          <img :src="item.icon" alt="">
        </div>
        <h2>{{item.title}}</h2>
        <div class="shiping_text">
          <p>{{item.content_text}}</p>
        </div>
        <button>{{item.button_text}}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      shipingList: []
    }
  },
  async created () {
    const { data: res } = await this.$http.get('shipping')
    this.shipingList = res.data
  }
}
</script>

<style lang="less" scoped>
.shipping{
  border-top: 1px solid #ebebeb;
  margin-top: 3.75rem;
  padding: 3.75rem 0;
}
.center{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  .logo{
    width: 3.75rem;
    margin: 0 auto;
  }
  h2{
    font-size: 1.1rem;
    color: #333;
    padding: 0.9rem;
  }
  .shiping_text{
    width: 54%;
    margin: 0 auto;
    padding-bottom: 1.6rem;
    p{
      font-size: 0.5rem;
      font-weight: 500;
      color: #666;
    }
  }
  button{
    width: 5.5rem;
    height: 1.7rem;
    border: none;
    text-align: center;
    line-height: 1.7rem;
    transition: 0.5s;
    border-radius: 30px;
    font-size: 0.4rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    background-color: #3d3d3d;
    text-transform: uppercase;
  }
  button:hover{
    background-color: #eb2323;
  }
  @media screen and (max-width:992px){
    .shiping_text{
      width: 100% !important;
    }
  }
  @media screen and (max-width:576px){
    button{
      width: 7rem;
      height: 2.7rem;
    }
  }
}
</style>
